<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Settings } from '@vicons/tabler'

const props = defineProps({
  settings: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:settings'])

const showSettings = ref(false)
const localSettings = reactive({ ...props.settings })

const presets = [
  { label: '自定义', value: 'custom' },
  { label: '专注', value: 'focused' },
  { label: '平衡', value: 'balanced' },
  { label: '活跃', value: 'creative' }
]

const currentPreset = ref('custom')

const oldSettings = ref(props.settings)

watch(
  localSettings,
  (newSettings) => {
    emit('update:settings', newSettings)
    // 检查是否有任何设置发生变化
    console.log(JSON.stringify(newSettings), JSON.stringify(oldSettings))
    if (JSON.stringify(newSettings) !== JSON.stringify(oldSettings)) {
      currentPreset.value = 'custom'
    }
  },
  { deep: true }
)

const applyPreset = (preset: string) => {
  // 根据不同的预设值设置对应的参数
  currentPreset.value = preset
  if (preset === 'focused') {
    Object.assign(localSettings, {
      temperature: 0.3,
      topP: 0.9,
      presencePenalty: 0.1,
      frequencyPenalty: 0.1,
      repetitionPenalty: 1.2
    })
  } else if (preset === 'balanced') {
    Object.assign(localSettings, {
      temperature: 0.6,
      topP: 0.95,
      presencePenalty: 0.5,
      frequencyPenalty: 0.5,
      repetitionPenalty: 1.0
    })
  } else if (preset === 'creative') {
    Object.assign(localSettings, {
      temperature: 0.9,
      topP: 1.0,
      presencePenalty: 0.8,
      frequencyPenalty: 0.8,
      repetitionPenalty: 0.8
    })
  }
}

const toggleSettings = () => {
  showSettings.value = !showSettings.value
}
</script>

<template>
  <n-popover trigger="click" placement="top-start" :style="{ width: '90vw', maxWidth: '500px' }">
    <template #trigger>
      <CustomButton @click="toggleSettings" bgColor="">
        <template #icon>
          <n-icon size="20" :component="Settings"></n-icon>
        </template>
      </CustomButton>
    </template>
    <n-card title="设置" :bordered="false" size="small" role="dialog" aria-modal="true">
      <template #header-extra>
        <n-radio-group
          v-model:value="currentPreset"
          size="small"
          name="presetGroup"
          @update:value="applyPreset"
        >
          <n-radio-button v-for="preset in presets" :key="preset.value" :value="preset.value">
            {{ preset.label }}
          </n-radio-button>
        </n-radio-group>
      </template>
      <n-form :model="localSettings" label-placement="left" size="small">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <h3 class="mb-2 font-bold">基本设置</h3>
            <n-form-item label="关联会话数">
              <n-input-number v-model:value="localSettings.maxHistory" :min="1" :max="15" />
            </n-form-item>
            <n-form-item label="最大回复数">
              <n-input-number v-model:value="localSettings.maxTokens" :min="1" :max="4098" />
            </n-form-item>
            <n-form-item label="温度设置值">
              <n-slider v-model:value="localSettings.temperature" :min="0" :max="1" :step="0.1" />
            </n-form-item>
            <n-form-item label="核采样阈值">
              <n-slider v-model:value="localSettings.topP" :min="0" :max="1" :step="0.1" />
            </n-form-item>
          </div>
          <div>
            <h3 class="mb-2 font-bold">惩罚设置</h3>
            <n-form-item label="存在惩罚值">
              <n-slider
                v-model:value="localSettings.presencePenalty"
                :min="0"
                :max="2"
                :step="0.1"
              />
            </n-form-item>
            <n-form-item label="频率惩罚值">
              <n-slider
                v-model:value="localSettings.frequencyPenalty"
                :min="0"
                :max="2"
                :step="0.1"
              />
            </n-form-item>
            <n-form-item label="重复惩罚值">
              <n-slider
                v-model:value="localSettings.repetitionPenalty"
                :min="1"
                :max="2"
                :step="0.1"
              />
            </n-form-item>
            <n-form-item label="采样候选数">
              <n-slider v-model:value="localSettings.topK" :min="1" :max="40" :step="1" />
            </n-form-item>
          </div>
        </div>
      </n-form>
    </n-card>
  </n-popover>
</template>

<style scoped>
@media (max-width: 768px) {
  :deep(.n-form-item) {
    margin-bottom: 0.5rem;
  }
  :deep(.n-form-item-label) {
    padding: 0;
    margin-bottom: 0.25rem;
  }
}
</style>
